var lunbotudatu = document.querySelector('.lunbotu .datu')
var zhon = document.querySelector('.lunbotu .zhon')
var rightBtn = document.querySelector('.lunbotu .you')
var leftBtn = document.querySelector('.lunbotu .zuo')
var lunbotu = document.querySelector('.lunbotu')
var timerId = null;
var flag = true
// 将前后两个放图的li复制跟别放到后面和前面
var firstLi = lunbotudatu.firstElementChild.cloneNode(true)
var lastLi = lunbotudatu.lastElementChild.cloneNode(true)
lunbotudatu.appendChild(firstLi)
lunbotudatu.insertBefore(lastLi, lunbotudatu.firstElementChild)
lunbotudatu.style.left = -firstLi.offsetWidth + "px"
// 定义一个当前显示的li的下标
var index = 1;
// 右键点击
rightBtn.onclick = function () {
    if (!flag) {
        return false;
    }
    flag = false;
    index++;
    // console.log(index);

    Tool.move(lunbotudatu, {
        left: -index * firstLi.offsetWidth
    }, function () {
        // 判断是否这次运动结束了
        // 判断index的最大值
        if (index === lunbotudatu.children.length - 1) {
            index = 1
            // 将ul切换回去
            lunbotudatu.style.left = -index * firstLi.offsetWidth + "px"
            // console.log(lunbotudatu.style.left);
        }
        // 操作小圆点
        for (var i = 0; i < zhon.children.length; i++) {
            zhon.children[i].className = '';
        }
        zhon.children[index - 1].className = 'active';
        flag = true
    })
    return false;
}


leftBtn.onclick = function(){
    if(!flag){
        return false
    }
    flag = false
    index--;
    Tool.move(lunbotudatu,{
        left:-index*firstLi.offsetWidth
    },function(){
        // 判断是否这次运动结束了
        // 判断index的最大值
        if(index===0){
            index = lunbotudatu.children.length-2
            // 将ul切换回去
            lunbotudatu.style.left = -index * firstLi.offsetWidth + "px"
        }
        // 操作小圆点
        for(var i=0;i<zhon.children.length;i++){
            zhon.children[i].className = '';
        }
        zhon.children[index-1].className = 'active';
        flag = true
    })
    return false;
}

// 小圆点点击
for(let i=0;i<zhon.children.length;i++){
    zhon.children[i].onclick = function(){
        if(!flag){
            return false;
        }
        flag = false
        index = i + 1;
        Tool.move(lunbotudatu,{
            left:-index*firstLi.offsetWidth
        },function(){
            // 判断是否这次运动结束了
            // 判断index的最大值
            if(index===0){
                index = zhon.children.length-2
                // 将ul切换回去
                zhon.style.left = -index * firstLi.offsetWidth + "px"
            }
            // 操作小圆点
            for(var i=0;i<zhon.children.length;i++){
                zhon.children[i].className = '';
            }
            zhon.children[index-1].className = 'active';
            flag = true
        })
    }
}

// 计时器
timerId = setInterval(function(){
    if(!flag){
        return false;
    }
    flag = false
    index++;
    Tool.move(lunbotudatu,{
        left:-index*firstLi.offsetWidth
    },function(){
        // 判断是否这次运动结束了
        // 判断index的最大值
        if(index===lunbotudatu.children.length-1){
            index = 1
            // 将ul切换回去
            lunbotudatu.style.left = -index * firstLi.offsetWidth + "px"
            // console.log(lunbotudatu.style.left);
        }
        // 操作小圆点
        for(var i=0;i<zhon.children.length;i++){
            zhon.children[i].className = '';
        }
        zhon.children[index-1].className = 'active';
        flag = true
    })
},3000)

// 移入移出
lunbotu.onmouseover = function(){
    clearInterval(timerId)
}

lunbotu.onmouseout = function(){
    timerId = setInterval(function(){
        if(!flag){
            return false;
        }
        flag = false
        index++;
        Tool.move(lunbotudatu,{
            left:-index*firstLi.offsetWidth
        },function(){
            // 判断是否这次运动结束了
            // 判断index的最大值
            if(index===lunbotudatu.children.length-1){
                index = 1
                // 将ul切换回去
                lunbotudatu.style.left = -index * firstLi.offsetWidth + "px"
                console.log(lunbotudatu.style.left);
            }
            // 操作小圆点
            for(var i=0;i<zhon.children.length;i++){
                zhon.children[i].className = '';
            }
            zhon.children[index-1].className = 'active';
            flag = true
        })
    },3000)
}


//中间分类
var $zhon_daohang = $('.zhon_daohang')
var $zhon_daohang_lis = $('.zhon_daohang li')
$zhon_daohang_lis.mouseenter(function(){
    $(this).css('color','red').addClass('active1').children().first().css('display','none').siblings().css('display','block').parent().siblings().removeClass('active1')
    $(this).animate({
    margin: "0 0 0 3px" ,
    
    }[1000]);
})
$zhon_daohang_lis.mouseleave(function(){
    $(this).css('color','').children().first().css('display','block').siblings().css('display','none').parent().removeClass('active1')
})

//秒杀区
// 倒计时
// 单独运算一次
    var d = new Date();
    var Hours = d.getHours()
    var Minutes = d.getMinutes() 
    var Seconds = d.getSeconds()
    if(Hours>12){
        $('.daojishi span').text('12点场距')
    }else{
        $('.daojishi span').text('00点场距')
    }
    Hours = Hours%12
    // console.log(Hours)
    Hours = 11-Hours 
    Minutes = 59-Minutes 
    Seconds = 59-Seconds
    if( Hours < 10 ){
        Hours = "0" + Hours;
    }
    if( Minutes < 10 ){
        Minutes = "0" + Minutes;
    }
    if( Seconds < 10 ){
        Seconds = "0" + Seconds;
    }
    // console.log(Hours,Minutes,Seconds)
    $('.shijian div:eq(0)').text(Hours)
    $('.shijian div:eq(1)').text(Minutes)
    $('.shijian div:eq(2)').text(Seconds)  


var timer = setInterval(function(){
    var d = new Date();
    var Hours = d.getHours()
    var Minutes = d.getMinutes() 
    var Seconds = d.getSeconds()
    if(Hours>12){
        $('.daojishi span').text('12点场距');
        $('.ms_zuo_shang>li').first().addClass('ms_zuo_shang_active').siblings().removeClass('ms_zuo_shang_active')
        $('.ms_zuo .ol1').css("display","none").next().css("display","flex")


    }else{
        $('.daojishi span').text('00点场距')
        $('.ms_zuo_shang>li').last().addClass('ms_zuo_shang_active').siblings().removeClass('ms_zuo_shang_active')
        $('.ms_zuo .ol2').css("display", "none").next().css("display","flex")
    }
    Hours = Hours%12
    // console.log(Hours)
    Hours = 11-Hours 
    Minutes = 59-Minutes 
    Seconds = 59-Seconds
    if( Hours < 10 ){
        Hours = "0" + Hours;
    }
    if( Minutes < 10 ){
        Minutes = "0" + Minutes;
    }
    if( Seconds < 10 ){
        Seconds = "0" + Seconds;
    }
    // console.log(Hours,Minutes,Seconds)
    $('.shijian div:eq(0)').text(Hours)
    $('.shijian div:eq(1)').text(Minutes)
    $('.shijian div:eq(2)').text(Seconds    )
},1000)

//秒杀区渲染
var loadindex = layer.load(1, {
    shade: [0.3, '#fff']
})
$.get('./php/index1.php',{'floor':1},res =>{
    console.log(res);
    
    var { meta: { status, msg }, data } = res;
    if (status === 1) {
                var str = '';
                for (var i = 0; i < 4; i++) {
                    str += `
                    <li class="col-lg-3 col-md-4 col-sm-6">
                    <a href="./xiangqing.html?id=${data[i].id}">
                        <img src="${data[i].img}" alt="">
                    </a>
                    <div class="biaoti_1">
                        <span>${data[i].name}</span>
                    </div>
                    <div class="dazhe_1 wnqcf">
                        <div>
                            <span class="dazhe_span1"></span>
                            <span>${data[i].zhekou}折</span>
                        </div>
                    </div>
                    <div class="zhekoujia">
                        <div class="xianjia">
                            <span>￥</span><span>${data[i].xianjia}</span>
                        </div>
                        <div class="yuanjia">
                            <span>￥</span><span>${data[i].yuanjia}</span>
                        </div>
                    </div>
                </li>
                `
                }
                $('.ms_zuo .ol1').html(str)
    }
   
}, 'json')

$.get('./php/index1.php',{'floor':6},res =>{
    // console.log(res);
    
    var { meta: { status, msg }, data } = res;
    if (status === 1) {
                var str = '';
                for (var i = 0; i < 4; i++) {

                    str += `
                    <li>
                    <a href="./xiangqing.html?id=${data[i].id}">
                        <img src="${data[i].img}" alt="">
                    </a>
                    <div class="biaoti_1">
                        <span>${data[i].name}</span>
                    </div>
                    <div class="dazhe_1 wnqcf">
                        <div>
                            <span class="dazhe_span1"></span>
                            <span>${data[i].zhekou}折</span>
                        </div>
                    </div>
                    <div class="zhekoujia">
                        <div class="xianjia">
                            <span>￥</span><span>${data[i].xianjia}</span>
                        </div>
                        <div class="yuanjia">
                            <span>￥</span><span>${data[i].yuanjia}</span>
                        </div>
                    </div>
                </li>
                `
                }
                $('.ms_zuo .ol2').html(str)
    }
}, 'json')


//一楼
$.get('./php/index1.php',{'floor':1},res =>{
    // console.log(res);
    
    var { meta: { status, msg }, data } = res;
    if (status === 1) {
                var str = '';
                for (var i = 0; i < 8; i++) {
                    str += `
                    <li>
                        <a href="./xiangqing.html?id=${data[i].id}">
                            <img src="${data[i].img}" alt="">
                        </a>
                        <div class="">
                            <p class="p1">${data[i].name}</span>
                        </div>
                        <div class="p2">
                            <span>${data[i].jianshao}</span>
                        </div>
                        <div class="p3">
                            <span>￥</span><span>${data[i].yuanjia}</span>
                        </div>
                    </li>
                `
                }
                $('.diannao_bjb').html(str)
    }
}, 'json')
//二楼
$.get('./php/index1.php',{'floor':2},res =>{
    // console.log(res);
    var { meta: { status, msg }, data } = res;
    if (status === 1) {
                var str = '';
                for (var i = 0; i < 8; i++) {
                    str += `
                    <li>
                        <a href="./xiangqing.html?id=${data[i].id}">
                            <img src="${data[i].img}" alt="">
                        </a>
                        <div class="">
                            <p class="p1">${data[i].name}</span>
                        </div>
                        <div class="p2">
                            <span>${data[i].jianshao}</span>
                        </div>
                        <div class="p3">
                            <span>￥</span><span>${data[i].yuanjia}</span>
                        </div>
                    </li>
                `
                }
                $('.diannao_tsj').html(str)
    }
}, 'json')
//三楼
$.get('./php/index1.php',{'floor':3},res =>{
    // console.log(res);
    var { meta: { status, msg }, data } = res;
    if (status === 1) {
                var str = '';
                for (var i = 0; i < 8; i++) {
                    str += `
                    <li>
                        <a href="./xiangqing.html?id=${data[i].id}">
                            <img src="${data[i].img}" alt="">
                        </a>
                        <div class="">
                            <p class="p1">${data[i].name}</span>
                        </div>
                        <div class="p2">
                            <span>${data[i].jianshao}</span>
                        </div>
                        <div class="p3">
                            <span>￥</span><span>${data[i].yuanjia}</span>
                        </div>
                    </li>
                `
                }
                $('.diannao_zb').html(str)
    }
    layer.close(loadindex)
}, 'json')

//头部粘性定位


window.onscroll = function (){ 
    // console.log(document.documentElement.scrollTop);
     var scrollTop = document.documentElement.scrollTop;
    if (scrollTop > 120) {
        $('header').addClass('header_S')
    }else {
       $('header').removeClass('header_S')
    }
    if (scrollTop > 578) {
        $('.louti').addClass('louti_xs')
    }else {
       $('.louti').removeClass('louti_xs')
    }
}

//楼梯
// console.log($('.dnzb').eq(3).offset().top);
var lou1 = document.querySelector("ul>.lou")
var lou2 = document.querySelector("ul>.lou2")
var lou3 = document.querySelector("ul>.lou3")
var lou4 = document.querySelector("ul>.lou4")
var lou0 = document.querySelector("ul>.lou0")
lou1.onclick = function(){
    $(document).scrollTop(520)
}
lou2.onclick = function(){
    $(document).scrollTop(850)
}
lou3.onclick = function(){
    $(document).scrollTop(1500)
}
lou4.onclick = function(){
    $(document).scrollTop(2140)
}
lou0.onclick = function(){
    $(document).scrollTop(0)
}




